<template>
	<view class="home">
		<view class="scrollNav">
			<scroll-view scroll-x class="navscroll">
				<view class="item" :class="index==navIndex ? 'active': ''" 
					v-for="(item,index) in navArr" :key="item.id"
					@click="clickNav(index)">{{item.classname}}
				</view>
			</scroll-view>
			<view class="content">
				<view class="row" v-for="item in newsArr" :key="item.id">
					<newbox :item="item" @click.native="goDetail(item)"></newbox>
				</view>
			</view>
			
			<view class="nodata" v-if="!newsArr.length">
				<image src="../../static/logo.png" mode="aspectFill"></image>
			</view>
			
			<view class="loading"  v-if="newsArr.length">
				<view></view>
				<view v-if="loading">数据加载中...</view>
				<view v-else>没有更多了~~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"标题",
				navId: 50,
				navIndex:0,
				newsArr:[],
				navArr:[],
				currentPage: 1,
				loading: 0,				// 0默认 1加载中   2没有更多了
			}
		},
		onLoad() {
			this.getNavData();
			this.getNewsData();
		},
		onReachBottom() {
			console.log("到底部了");
			this.currentPage++;
			this.loading = 1;
			this.getNewsData(this.navId);
		},
		methods: {
			// 点击导航切换
			clickNav(index) {
				if(this.navIndex != index) {
					this.newsArr = [];
					this.currentPage = 1;
				}
				this.loading = 0;
				this.navIndex = index;
				this.navId = this.navArr[index].id;
				this.getNewsData(this.navId);
			},
			// 跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url:`/pages/newsDetail/newsDetail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航列表数据
			getNavData() {
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: res=> {
						console.log(res);
						this.navArr = res.data;
						this.navId = this.navArr[0].id;
					}
				});
			},
			// 获取新闻列表数据
			getNewsData(id=50) {
				console.log(id);
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						num: 10,
						cid: id,
						page: this.currentPage
					},
					success:res=>{
						console.log(res);
						if(res.data.length <= 0) {
							this.loading = 0;
						}
						this.newsArr = [...this.newsArr, ...res.data];
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.navscroll {
	height: 100rpx;
	background: #F7F8FA;
	white-space: nowrap;
	position: fixed;
	top: var(--window-top);
	left:0;
	z-index: 10;
	// /deep/ ::-webkit-scrollbar {
	// 	width: 4px !important;
	// 	height: 1px !important;
	// 	overflow: auto !important;
	// 	background: transparent !important;
	// 	-webkit-appearance: auto !important;
	// 	display: block;
	// }
	.item {
		font-size: 40rpx;
		display: inline-block;
		line-height: 100rpx;
		padding: 0 30rpx;
		color: #333;
		&.active {
			color: #31c27c;
		}
	}
}
.content {
	padding: 30rpx;
	padding-top: 130rpx;
	.row {
		border-bottom: 1px dotted #efefef;
		padding: 20rpx 0;
	}
}

.nodata {
	display: flex;
	justify-content: center;
	image {
		width: 360rpx;
	}
}

.loading {
	text-align: center;
	font-size: 16rpx;
	color: #888;
	line-height: 2em;
}
</style>
